<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>小兔鲜个人中心</title>
    <link href="./favicon.ico" rel="shortcut icon">
    <link href="./css/base.css" rel="stylesheet">
    <link href="./css/common.css" rel="stylesheet">
    <!-- normalize 这里面的 css样式更改一些 标签元素默认样式, 原来在写index.html的时候, 没有使用 | normalize 标准化 -->
    <!--<link href="./css/normalize.css" rel="stylesheet">-->
    <link href="./css/index.css" rel="stylesheet">
    <link href="./css/center.css" rel="stylesheet">
    <link href="./lib/iconfont/iconfont.css" rel="stylesheet">
</head>

<body>
<!-- 头部模块 -->
<header>

    <!-- 快捷菜单模块 -->
    <div class="xtx-shortcut">

        <!-- 版心的盒子 -->
        <nav class="container">
            <ul class="fr">
                <li><a href="#">请先登录</a>|</li>
                <li><a href="#">免费注册</a>|</li>
                <li><a href="#">我的订单</a>|</li>
                <li><a href="#">会员中心</a>|</li>
                <li><a href="#">帮助中心</a>|</li>
                <li><a href="#">在线客服</a>|</li>
                <!-- 使用一个img标签实现  -->
                <!--<li><a href="#"><img alt="" class="iphone" src=""> 手机版</a></li>-->
                <!-- 使用伪元素的方式实现-->
                <li><a href="#">手机版</a></li>
            </ul>
        </nav>
    </div>

    <!-- 主导航模块-->
    <div class="xtx-main-nav container">
        <!-- logo     ->  快速写法 h1.logo.fl -->
        <h1 class="logo fl">
            <!-- SEO优化-->
            <a href="#">小兔鲜</a>
        </h1>

        <!-- 导航 -->
        <nav class="nav fl">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </nav>

        <!-- 搜索 -->
        <div class="search fl">
            <label>
                <!-- input 的搜索框类型, 存在自动内减的功能 -->
                <input placeholder="搜一搜" type="search">
            </label>
        </div>

        <!-- 购物车 -->
        <div class="cart fl">
            <span>2</span>
        </div>
    </div>
</header>

<!-- 内容：待完成 -->
<div class="xtx-body">
    <div class="container">
        <div class="aside">
            <div class="avatar"></div>
            <p>张小花</p>
            <div class="vip"><i></i> 黄金会员</div>
            <div class="list">
                <h5>我的账户</h5>
                <ul>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">消息通知</a></li>
                    <li><a href="#">个人信息</a></li>
                    <li><a href="#">安全设置</a></li>
                    <li><a href="#">地址管理</a></li>
                    <li><a href="#">我的积分</a></li>
                    <li><a href="#">我的足迹</a></li>
                    <li><a href="#">邀请有礼</a></li>
                    <li><a href="#">幸运抽奖</a></li>
                </ul>
            </div>
            <div class="list">
                <h5>交易管理</h5>
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">优惠券</a></li>
                    <li><a href="#">礼品卡</a></li>
                    <li><a href="#">评价晒单</a></li>
                    <li><a href="#">售后服务</a></li>
                </ul>
            </div>
            <div class="list">
                <h5>我的收藏</h5>
                <ul>
                    <li><a href="#">收藏的商品</a></li>
                    <li><a href="#">喜欢的商品</a></li>
                </ul>
            </div>
            <div class="list">
                <h5>帮助中心</h5>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客户</a></li>
                </ul>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="main">
            <!-- 用户账户概览区域 -->
            <div class="overview">
                <div>
                    <a href="#">
                        <img alt="" src="./images/vip.png">
                        <p>会员中心</p>
                    </a>
                    <a href="#">
                        <img alt="" src="./images/safe.png">
                        <p>安全设置</p>
                    </a>
                    <a href="#">
                        <img alt="" src="./images/address.png">
                        <p>地址管理</p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <span>6</span>
                        <p>优惠卷</p>
                    </a>
                    <a href="#">
                        <span>70</span>
                        <p>礼品卡</p>
                    </a>
                    <a href="#">
                        <span>120 </span>
                        <p>积分</p>
                    </a>
                </div>
            </div>

            <!-- 订单 -->
            <div class="panel orders">
                <div class="panel-title">
                    <h4>我的订单</h4>
                    <!-- todo 浏览器刷新后, 出现晃动现象, 出现原因: 解决方式: -->
                    <a href="#">查看更多<i class="iconfont icon-more"></i></a>
                </div>
                <div class="content">
                    <ul>
                        <li>
                            <div class="goods">
                                <div class="pic">
                                    <a href="#"><img alt="" src="./uploads/order_goods_1.jpg"></a>
                                </div>
                                <div class="txt">
                                    <!-- 给h5表添加单行溢出的代码 -->
                                    <h5>拉夫劳伦t恤男正品圆领短袖...</h5>
                                    <p>颜色：<span class="color">白色</span>
                                        尺码：<span class="size">M</span>
                                        数量：<span class="count">1</span>
                                    </p>
                                </div>
                            </div>
                            <div class="status">
                                <span>待付款</span>
                            </div>
                            <div class="pay common">
                                <p>¥<span>99.00</span></p>
                                <p>（含运费：¥<span>10.00</span>元）</p>
                                <p>在线支付</p>
                            </div>
                            <div class="action common">
                                <a href="#">立即付款</a>
                                <a href="#">查看详情</a>
                                <a href="#">取消订单</a>
                            </div>
                        </li>
                        <li>
                            <div class="goods">
                                <div class="pic">
                                    <a href="#"><img alt="" src="./uploads/order_goods_2.jpg"></a>
                                </div>
                                <div class="txt">
                                    <h5>李宁跑步鞋男鞋空气弧...</h5>
                                    <p>颜色：<span class="color">灰色</span>
                                        尺码：<span class="size">42</span>
                                        数量：<span class="count">1 </span>
                                    </p>
                                </div>
                            </div>
                            <div class="status">
                                <span>待收货</span>
                                <a href="#">查看物流</a>
                            </div>
                            <div class="pay common">
                                <p>¥<span>199.00</span></p>
                                <p>（含运费：¥<span>10.00</span>元）</p>
                                <p>在线支付</p>
                            </div>
                            <div class="action common">
                                <a href="#">确认收货</a>
                                <a href="#">查看详情</a>
                                <a href="#">再次购买</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


</div>
<!-- 内容 -->


<!-- 底部模块 -->
<footer>
    <!-- 联系方式 -->
    <div class="xtx-contact">
        <div class="cus-service">
            <span>客户服务</span>
            <div class="online-customer">
                <div class="img"></div>
                <a class="common-cus-a" href="#">在线客服</a>
            </div>
            <div class="feedback">
                <div class="img"></div>
                <a class="common-cus-a" href="#">问题反馈</a>
            </div>
        </div>
        <div class="follow">
            <span>关注我们</span>
            <div class="weixin">
                <div class="img"></div>
                <a class="common-cus-a" href="#">公众号</a>
            </div>
            <div class="weibo">
                <div class="img"></div>
                <a class="common-cus-a" href="#">微博</a>
            </div>
        </div>
        <div class="download">
            <span>下载APP</span>
            <div class="code">
                <!-- 可以在样式里面设置font-size: 0 隐藏a标签的文字-->
                <a href="#">二维码</a>
            </div>
            <div class="down-desc">
                <!-- bug点: br标签导致定位出现问题 -->
                <span>扫描二维码</span>
                <span>立马下载APP</span>
                <a href="#">下载页面</a>
            </div>
        </div>
        <div class="service-hotline">
            <span>服务热线</span><br>
            <span>400-0000-000</span><br>
            <span>周一至周日 8:00-18:00</span>
        </div>

    </div>

    <!-- 宣传信息 -->
    <div class="xtx-service">
        <!-- 版心盒子 -->
        <div class="container">
            <a href="#">价格亲民</a>
            <a href="#">物流快捷</a>
            <a href="#">品质新鲜</a>
        </div>
    </div>

    <!-- 版权信息-->
    <div class="xtx-copyright">
        <!-- 版心盒子 -->
        <div class="container clearfix">
            <p>
                <!-- a标签换行自动存在一个 空格的 -->
                <a href="#">关于我们</a> |
                <a href="#">帮助中心</a> |
                <a href="#">售后服务</a> |
                <a href="#">配送与验收</a> |
                <a href="#">商务合作</a> |
                <a href="#">搜索推荐</a> |
                <a href="#">友情链接</a>
            </p>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>
</footer>
</body>

</html>
